<template>
    <div>
      <el-button @click="handleClick">点击显示</el-button>
      <ul class="list-ul" v-show="sfShowUL" tabindex="1" @blur="handleBlur">
        <li @click="clickItem" v-for="item in themeStyle" :key="item.value">{{item.label}}</li>
      </ul>
    </div>
</template>

<script>
export default {
  name: "BlurDiv",
  data(){
    return {
      themeStyle:[
        {
          "value": "brightdark",
          "label": "（深01）黑绿"
        },
        {
          "value": "3b8f2b-83be70",
          "label": "湖南主题样式"
        },
        {
          "value": "wheat",
          "label": "（深04）麦田"
        },
        {
          "value": "lightgray3",
          "label": "灰3"
        },
        {
          "value": "circleTiaoxingtu",
          "label": "圆角条形图"
        },
        {
          "value": "colorful",
          "label": "七彩"
        },
        {
          "value": "blue2-spacing",
          "label": "（浅05）蓝色"
        },
        {
          "value": "ffbffd-87b17f",
          "label": "收费站效果图专用"
        },
        {
          "value": "60d4ab-6ae8dc",
          "label": "宿州专用"
        },
        {
          "value": "b332b0-227966",
          "label": "（深05）深海-美化"
        },
        {
          "value": "bd6a84-9315b8",
          "label": "（浅07）冰山-美化"
        },
        {
          "value": "a2587d-118227",
          "label": "（深03）黑红-美化"
        },
      ],
      sfShowUL:false
    }
  },
  methods:{
    handleClick(){
      this.sfShowUL = true
      setTimeout(() => {
        document.getElementsByClassName('list-ul')[0].focus();
      },300)
    },
    handleBlur(){ // 对失去焦点的监听
      this.sfShowUL = false
    },
    clickItem(){
      console.log('点击了li')
    }
  }
}
</script>

<style scoped>
  ul li {
    list-style: none;
  }
  ul{
    width: 200px;
    border: 1px solid #2c3e50;
    padding: 0;
  }
  li{
    cursor: pointer;
    background: #42b983;
    margin: 10px;
    padding: 10px;
  }
</style>